<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view class="bgc-white" id="top">
			<u-tabs :list="tabList" @click="tabClick"></u-tabs>
		</view>

		<scroll-view class="" scroll-y refresher-enabled show-scrollbar
			:refresher-triggered="triggered" @refresherrefresh="$u.throttle(onRefresherrefresh, 200)"
			@scrolltolower='$u.throttle(onScrolltolower,1000)' :style="{height: `${screenHeight}px`}">
			
			<u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />
			
			<!-- 列表 -->
			<view class="p-l-30 p-r-30">
				<view class="item" v-for="(item, index) in listData" :key="index" @tap="itemClick(item)">
					<view class="flex-sb">
						<view class="comego">{{item.comegoName}}</view>
						<view>
							<u-tag :text="item.scanStateName" :type="getTagType(item)"></u-tag>
						</view>
					</view>
					<view class="flex-sb">
						<view class="bill-no">{{item.billNo}}</view>
						<view class="business-time">{{item.businessTime}}</view>
					</view>
					<view class="remarks">{{item.remarks}}</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		listAllVoPage,
		listNonScanVoPage,
		listScanningVoPage,
		listScanFinishVoPage
	} from '@/apis/bill/sale-reserve.js'

	export default {
		data() {
			return {
				screenHeight: 0,
				pageLoading: true,
				triggered: false,
				listData: [],
				pageInfo: {
					current: 1, // 当前页
					size: 10, // 每页数据条数
					sort: '', // 排序字段
					order: 'desc', // 排序方向
					total: 0 // 总数居量
				},
				tabCurrentIndex: 0,
				tabList: [{
						name: "全部"
					},
					{
						name: "未采集"
					},
					{
						name: "采集中"
					},
					{
						name: "采集完成"
					}
				]
			}
		},
		onLoad() {
			this.initData()
		},
		onReady() {
			const sysInfo = uni.getSystemInfoSync()
			uni.createSelectorQuery().in(this).select('#top').boundingClientRect(data => {
				this.screenHeight = sysInfo.windowHeight - data.height
			}).exec();
		},
		methods: {
			initData() {
				this.listPage()
			},
			getTagType(row) {
				if (row.scanState === 0) return 'error'
				if (row.scanState === 1) return 'warning'
			},
			tabClick(data) {
				console.log("tabClick", data)
				this.tabCurrentIndex = data.index
				this.listData = []
				this.listPage()
			},
			listPage() {
				console.log("listPage", this.listData)
				const params = {
					page: this.pageInfo,
					data: {}
				}
				const methodMap = {
					0: listAllVoPage,
					1: listNonScanVoPage,
					2: listScanningVoPage,
					3: listScanFinishVoPage,
				}
				const method = methodMap[this.tabCurrentIndex]
				console.log("method")
				method(params).then(res => {
					if (!res.data.flag) return
					const records = res.data.data.page.records || []
					this.listData.push(...records)
				}).finally(_ => {
					this.triggered = false
					this.pageLoading = false
				})
			},
			itemClick(row) {
				this.$Router.push({
					path: "/sale/saleOrderDetail",
					query: {
						billId: row.id
					}
				})
			},
			onRefresherrefresh() {
				this.triggered = true
				this.listData = []
				console.log("onRefresherrefresh")
				this.listPage()
			},
			onScrolltolower() {}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		border-radius: 10rpx;
		background: #fff;
		padding: 30rpx;
		margin-top: 30rpx;

		.comego {
			font-size: 40rpx;
		}

		.bill-no {
			font-size: 30rpx;
			color: $uni-text-color;
		}

		.business-time {
			color: $uni-text-color-grey;
		}

		.remarks {
			font-size: 24rpx;
			margin-top: 20rpx;
			color: $uni-text-color-placeholder;
		}
	}
</style>